<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="demo-input-size" style="padding: 0;margin: 0 auto;height: 735px;">

        姓名：
        <el-input placeholder="请输入姓名" suffix-icon="el-icon-user" style="display: inline-block;width: 150px;"
                  v-model="searchInfo.name">
        </el-input>
        科室：
        <el-input placeholder="请输入科室" suffix-icon="el-icon-price-tag" style="display: inline-block;width: 150px;" v-model="searchInfo.kname">
        </el-input>

        性别：
        <el-select v-model="searchInfo.sex" placeholder="请选择" style="width: 150px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-button icon="el-icon-search" @click="searchDoctor()">查询</el-button>

        <div style="padding-top: 20px;margin: 0 auto;">
            <el-table
                    :data="doctorArr"
                    border
                    style="width: 98%; height: 98%;">

                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="telephone" label="电话"></el-table-column>
                <el-table-column prop="kes.kname" label="科室"></el-table-column>
                <el-table-column prop="post.pname" label="职称"></el-table-column>
                <el-table-column fixed="right" label="查看简历" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="viewResume(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteDoctor(scope.row.id)">删除</el-button>
                        <!--修改暂时不写-->
                        <el-button type="text" size="small" @click="showUpdateDialog(scope.row.id)">修改</el-button>

                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div style=" position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%);">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="totalCount">
            </el-pagination>
        </div>
        <el-dialog title="修改医生" :visible.sync="dialogFormVisible">
            <el-form :model="updateDoctorArr" :rules="rules" ref="updateDoctorArr">
                <el-form-item label="姓名" prop="name" style="width: 200px;" >
                    <el-input v-model="updateDoctorArr.name" name="name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age" style="width: 200px;">
                    <el-input v-model="updateDoctorArr.age" oninput="value=value.replace(/[^\d]/g,'')"  name="age"></el-input>
                </el-form-item>
                <el-form-item label="请选择性别" prop="sex">
                    <el-select v-model="updateDoctorArr.sex" placeholder="请选择性别" name="sex">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" prop="telephone" style="width: 200px;">
                    <el-input v-model="updateDoctorArr.telephone" oninput="value=value.replace(/[^\d]/g,'')" name="telephone"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address" style="width: 200px;">
                    <el-input v-model="updateDoctorArr.address" name="address"></el-input>
                </el-form-item>
                <el-form-item label="科室" prop="kid">
                    <el-select v-model="updateDoctorArr.kid" placeholder="请选择科室" name="kid">
                        <el-option v-for="(k,i) in kesArr" :label="k.kname" :value="k.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职称" prop="pid">
                    <el-select v-model="updateDoctorArr.pid" placeholder="请选择职称" name="pid">
                        <el-option v-for="(p,i) in postArr" :label="p.pname" :value="p.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="rid">
                    <el-select v-model="updateDoctorArr.rid" placeholder="请选择角色" name="rid">
                        <el-option v-for="(r,i) in roleArr" :label="r.rname" :value="r.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateDoctor()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</div>
<script>
    $.get("/ssm/doctor/doctorsList",function (backData) {
        zz.doctorArr = backData.data;
    });
    var zz = new Vue({
        el: "#app",
        data: {
            searchInfo: {
                name:"",
                kname:"",
                sex:""
            },
            doctorArr: [],
            kesArr:{},
            postArr:{},
            roleArr:{},
            updateDoctorArr:{},
            dialogFormVisible:false,
            totalCount:0,
            options: [{
                    value: '男',
                    label: '男'
                },
                {
                    value: '女',
                    label: '女'
                }
            ],
            value: '',
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' },
                ],
                kid: [
                    { required: true, message: '请选择科室', trigger: 'change' },
                ],
                pid: [
                    { required: true, message: '请选择职称', trigger: 'change' },
                ],
                rid: [
                    { required: true, message: '请选择角色权限', trigger: 'change' },
                ],
            },
        },
        methods: {
            viewResume(id){
                window.location.href="/ssm/doctors/doctorResume.html?id="+id;
            },
            updateDoctor(){
                $.post("/ssm/doctor/updateDoctor",zz.updateDoctorArr,function (backData) {
                    if (backData.code == 1) {
                        zz.dialogFormVisible = false;
                        zz.$refs["updateDoctorArr"].resetFields();
                        zz.$message.success('修改成功');
                        getData(1,8)
                    }else{
                        zz.$message.error('修改失败');
                    }
                });
            },
            showUpdateDialog(id){
                $.get("/ssm/doctor/getKes",function (backData) {
                    zz.kesArr = backData.data;
                    $.get("/ssm/doctor/getPost",function (backData) {
                        zz.postArr=backData.data;
                        $.get("/ssm/doctor/getRole",function (backData) {
                            zz.roleArr=backData.data;
                            $.get("/ssm/doctor/getDoctor/"+id,function (backData) {
                                zz.updateDoctorArr = backData.data;
                                zz.dialogFormVisible = true;
                            })
                        });
                    });
                });
            },
            deleteDoctor(id){
                zz.$confirm('此操作将永久删除该医生, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/doctor/deleteDoctor/"+id,function (backData) {
                        zz.$message.success(backData.msg);
                        getData(1,8)
                    })
                })
            },
            examine(){
                window.location.href= doctorArr.resume.resume
            },

            searchDoctor(){
                getData(1,8);
            },
            handleCurrentChange(val){
                getData(val,8);
            }
        }
    });
    function getData(a,b){
        zz.searchInfo.pageNo= a;
        zz.searchInfo.pageCount=b;
        $.post("/ssm/doctor/doctorQuery",zz.searchInfo,function(backData){
            zz.doctorArr = backData.data.currentData;
            zz.totalCount = backData.data.totalCount;
        })
    }
    getData(1,8);
</script>
</body>
</html>
